<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>训前管理</title>
    <link href="/assets/images/favicon.ico" rel="icon">
    <link rel="stylesheet" href="/assets/libs/layui/css/layui.css"/>
    <link rel="stylesheet" href="/assets/module/admin.css?v=318"/>

    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <script type="text/javascript" src="/assets/libs/layui/layui.js"></script>
    <script type="text/javascript" src="/assets/js/common.js?v=318"></script>
    <style>
        /*.layui-input-inline{*/
        /*    display: flex;*/
        /*    align-content: start;*/
        /*}*/
        /*.layui-input{*/
        /*    left: 10px;*/
        /*}*/
        .layui-card-header{
            /*padding-top: 10px;*/
            padding-top: 13px;
            padding-bottom: 50px;
        }
        .layui-card-body{
            margin-top: 30px;
        }
        .layui-form-label
        {
            padding: 9px 8px 9px 0px;
        }
    </style>
    <script type="text/javascript">
        var url = window.location.pathname.substring(1);
        var item = url.split("/");
        var C = item[0];
        var A = item[1];
        var cUrl = "/" + C;
    </script>
</head>
<body>
<div>
    <div class="layui-card">
        <div class="layui-tab">
            <ul class="layui-tab-title">
                <li class="layui-this">诊断问卷</li>
                <li>诊断方案</li>
                <li>诊断报告</li>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">
                    <!-- 诊断问卷的表格 -->
                    <table class="layui-table">
                        <thead>
                        <tr>
                            <th>项目名称</th>
                            <th>版本</th>
                            <th>提交日期</th>
                            <th>提交人</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <!-- 使用Thymeleaf来循环遍历后台传来的数据 -->
                        <tr th:each="item : ${SurveyVersionInfo}">
                            <td th:text="${item.projectName}"></td>
                            <td th:text="${item.version}"></td>
                            <td th:text="${item.SubDate}"></td>
                            <td th:text="${item.SubUser}"></td>
                            <!-- 查看详情按钮 -->
                            <td>
                                <!-- 在这里设置查看详情按钮的链接 -->
                                <a th:href="@{'/pretraining/exportWorldSurveyInfo?version=' + ${item.version}}" class="layui-btn layui-btn-normal layui-btn-sm">导出World</a>
                                <a th:href="@{'/pretraining/exportPdfSurveyInfo?version=' + ${item.version}}" class="layui-btn layui-btn-danger layui-btn-sm">导出Pdf</a>
                            </td>
                        </tr>

                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <script type="text/javascript" th:inline="javascript">
            // 在 JavaScript 中获取后端传递的 SurveyVersionInfo 数据
            var surveyVersionInfo = /*[[${surveyVersionInfoJson}]]*/ '[]';
            // 将 JSON 字符串解析为 JavaScript 对象
            surveyVersionInfo = JSON.parse(surveyVersionInfo);
            var projectId = surveyVersionInfo[0].projectId
            //注意：选项卡 依赖 element 模块，否则无法进行功能性操作
            layui.use('element', function(){
                var element = layui.element;
                var $ = layui.jquery;
                element.on('tab()', function(data){
                    // 打印选中的选项卡索引
                    console.log('当前选中的选项卡索引是：' + data.index);
                    // 根据选中的选项卡索引输出不同的内容
                    if (data.index === 0) {
                        $.ajax({
                            type: 'GET',
                            url: "/pretraining/surveyVersionInfo?id=" + projectId,
                            contentType: 'application/json',  // 设置为 JSON 格式
                            success: function (res) {
                                // 假设 res 是数组形式的数据
                                console.log(res);

                                // 获取表格的 tbody 部分
                                var $tbody = $('table.layui-table tbody');

                                // 清空表格内容
                                $tbody.empty();

                                // 遍历 res 数据，生成新的表格行
                                res.forEach(function(item) {
                                    var row = '<tr>';
                                    row += '<td>' + item.projectName + '</td>';
                                    row += '<td>' + item.version + '</td>';
                                    row += '<td>' + item.subDate + '</td>';
                                    row += '<td>' + item.subUser + '</td>';
                                    row += '<td><a href="/pretraining/exportWorldSurveyInfo?version=' + item.version + '" class="layui-btn layui-btn-normal layui-btn-sm">导出world</a><a href="/pretraining/exportPdfSurveyInfo?version=' + item.version + '" class="layui-btn layui-btn-danger layui-btn-sm">导出pdf</a></td>';
                                    row += '</tr>';

                                    // 将行添加到表格
                                    $tbody.append(row);
                                });

                            }
                        });
                    } else if (data.index === 1) {
                        $.ajax({
                            type: 'GET',
                            url: "/pretraining/schameVersionInfo?id=" + projectId,
                            contentType: 'application/json',  // 设置为 JSON 格式
                            success: function (res) {
                                // 假设 res 是数组形式的数据
                                console.log(res);

                                // 获取表格的 tbody 部分
                                var $tbody = $('table.layui-table tbody');

                                // 清空表格内容
                                $tbody.empty();

                                // 遍历 res 数据，生成新的表格行
                                res.forEach(function(item) {
                                    var row = '<tr>';
                                    row += '<td>' + item.projectName + '</td>';
                                    row += '<td>' + item.version + '</td>';
                                    row += '<td>' + item.subDate + '</td>';
                                    row += '<td>' + item.subUser + '</td>';
                                    row += '<td><a href="/pretraining/exportWorldSchemaInfo?version=' + item.version + '" class="layui-btn layui-btn-normal layui-btn-sm">导出world</a><a href="/pretraining/exportPdfSchemaInfo?version=' + item.version + '" class="layui-btn layui-btn-danger layui-btn-sm">导出pdf</a></td>';
                                    row += '</tr>';

                                    // 将行添加到表格
                                    $tbody.append(row);
                                });

                            }
                        });
                    } else if (data.index === 2) {
                        $.ajax({
                            type: 'GET',
                            url: "/pretraining/reportVersionInfo?id=" + projectId,
                            contentType: 'application/json',  // 设置为 JSON 格式
                            success: function (res) {
                                // 假设 res 是数组形式的数据
                                console.log(res);

                                // 获取表格的 tbody 部分
                                var $tbody = $('table.layui-table tbody');

                                // 清空表格内容
                                $tbody.empty();

                                // 遍历 res 数据，生成新的表格行
                                res.forEach(function(item) {
                                    var row = '<tr>';
                                    row += '<td>' + item.projectName + '</td>';
                                    row += '<td>' + item.version + '</td>';
                                    row += '<td>' + item.subDate + '</td>';
                                    row += '<td>' + item.subUser + '</td>';
                                    row += '<td><a href="/pretraining/exportWorldReportInfo?version=' + item.version + '" class="layui-btn layui-btn-normal layui-btn-sm">导出world</a><a href="/pretraining/exportPdfReportInfo?version=' + item.version + '" class="layui-btn layui-btn-danger layui-btn-sm">导出pdf</a></td>';
                                    row += '</tr>';

                                    // 将行添加到表格
                                    $tbody.append(row);
                                });

                            }
                        });
                    }
                });
            });
        </script>
    </div>
</div>
<footer>
    <!-- JS部分 -->
    <script type="text/javascript">
        var url = window.location.pathname.substring(1);
        var item = url.split("/");
        var jsUrl = "/static/module/javaweb_" + item[0] + ".js";
        document.write("<script src='" + jsUrl + "'><\/script>");
    </script>
</footer>
</body>
</html>
